<template>
  <div>
    <el-form ref="form" label-position="top" :model="spec">
      <el-form-item
        :label="$t('business.workload.strategy')"
        prop="strategy.type"
      >
        <div v-if="isDeployment" class="w-full">
          <k-section type="simple">
            <template #head>
              <k-segment
                v-model="deployment.strategy.type"
                :options="uiState.deployment_strategy_list"
                default="RollingUpdate"
                @change="onPolicyTypeChange"
              />
            </template>
            <el-collapse-transition>
              <div
                v-if="deployment?.strategy && deployment.strategy.rollingUpdate"
              >
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      :label="$t('business.workload.max_surge')"
                      prop="strategy.rollingUpdate.maxSurge"
                    >
                      <el-input
                        v-model:model-value="
                          deployment.strategy.rollingUpdate.maxSurge
                        "
                        onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                      >
                        <template #append>
                          <span>{{ "%" }}</span>
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item
                      :label="$t('business.workload.max_unavaliable')"
                      prop="strategy.rollingUpdate.maxUnavailable"
                    >
                      <el-input
                        v-model:model-value="
                          deployment.strategy.rollingUpdate.maxUnavailable
                        "
                        onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                        clearable
                      >
                        <template v-slot:append>
                          <span>{{ "%" }}</span>
                          <!-- <el-select
              v-if="false"
              v-model="deployment.strategy.rollingUpdate.maxUnavailableUnit"
              style="width: 80px"
            >
              <el-option
                v-for="(item, index) in uiState.devider_list"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-collapse-transition>
          </k-section>
        </div>

        <ko-data-item
          v-else-if="statefulSet.updateStrategy"
          v-model:model-value="statefulSet.updateStrategy.type"
          itemType="radio"
          :radios="uiState.strategy_list"
          @change="onPolicyTypeChange"
        />
      </el-form-item>
      <el-row :gutter="20">
        <el-col v-if="isStatefulSet" :span="12">
          <el-form-item
            :label="$t('business.workload.pod_manage_policy')"
            prop="podManagementPolicy"
          >
            <ko-data-item
              v-model="statefulSet.podManagementPolicy"
              itemType="radio"
              :radios="uiState.pod_management_policy_list"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col v-if="isDaemonSet" :span="12">
          <el-form-item
            :label="$t('business.workload.min_ready_time')"
            prop="minReadySeconds"
          >
            <ko-data-item
              v-model.number="deployment.minReadySeconds"
              :dividerName="$t('business.workload.seconds')"
              itemType="number"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="isDeployment" :span="12">
          <el-form-item
            :label="$t('business.workload.progress_deadline')"
            prop="progressDeadlineSeconds"
          >
            <ko-data-item
              v-model.number="deployment.progressDeadlineSeconds"
              :dividerName="$t('business.workload.seconds')"
              itemType="number"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            :label="$t('business.workload.revision_history_limit')"
            prop="revisionHistoryLimit"
          >
            <ko-data-item
              v-model.number="deployment.revisionHistoryLimit"
              :dividerName="$t('business.workload.revision')"
              itemType="number"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {
  DaemonSetSpec,
  DeploymentSpec,
  PodSpec,
  StatefulSetSpec
} from "@/views/domain/kubeHud/api/k8s";

import KoDataItem from "@/views/domain/kubeHud/views/components/ko-data-item/index.vue";
import KSegment from "@/views/domain/kubeHud/views/components/k-segment/index.vue";
import KSection from "@/views/domain/kubeHud/views/components/k-section/index.vue";

import { computed, onMounted, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { WorkloadType } from "../types";
type Prop = {
  resourceType?: WorkloadType;
};
const props = defineProps<Prop>();

const { t } = useI18n();
const spec = defineModel<DeploymentSpec | StatefulSetSpec | DaemonSetSpec>(
  "spec"
);

const daemonSet = computed<DaemonSetSpec>(() => spec.value as DaemonSetSpec);
const deployment = computed<DeploymentSpec>(() => spec.value as DeploymentSpec);
const statefulSet = computed<StatefulSetSpec>(
  () => spec.value as StatefulSetSpec
);

const uiState = reactive({
  deployment_strategy_list: [
    {
      label: t("business.workload.rolling_update"),
      value: "RollingUpdate"
    },
    { label: t("business.workload.recreate"), value: "Recreate" }
  ],
  strategy_list: [
    {
      label: t("business.workload.rolling_update"),
      value: "RollingUpdate"
    },
    { label: t("commons.button.delete"), value: "OnDelete" }
  ],
  pod_management_policy_list: [
    { label: "OrderedReady", value: "OrderedReady" },
    { label: "Parallel", value: "Parallel" }
  ],
  devider_list: [
    { label: "Pods", value: "" },
    { label: "%", value: "%" }
  ]
});

const isDeployment = computed(() => props.resourceType === "Deployment");
const isDaemonSet = computed(() => props.resourceType === "DaemonSet");
const isStatefulSet = computed(() => props.resourceType === "StatefulSet");

const onPolicyTypeChange = (val: string) => {
  if (isDeployment.value) {
    switch (val) {
      case "RollingUpdate":
        deployment.value.strategy.rollingUpdate = {
          maxSurge: "25%",
          maxUnavailable: "25%"
        };
        break;
      case "Recreate":
        deployment.value.strategy.rollingUpdate = undefined;
        break;
    }
  } else if (isDaemonSet.value) {
    switch (val) {
      case "RollingUpdate":
        statefulSet.value.updateStrategy = {
          type: "RollingUpdate",
          rollingUpdate: {
            partition: 0
          }
        };
        break;
      case "OnDelete":
        statefulSet.value.updateStrategy = {
          type: "OnDelete"
        };
    }
  } else if (isStatefulSet.value) {
    switch (val) {
      case "RollingUpdate":
        statefulSet.value.updateStrategy = {
          type: "RollingUpdate",
          rollingUpdate: {
            partition: 0
          }
        };
        break;
      case "OnDelete":
        statefulSet.value.updateStrategy = {
          type: "OnDelete"
        };
    }
  }
};

const initData = () => {
  if (isDeployment.value && !deployment.value.strategy) {
    deployment.value.strategy = {
      rollingUpdate: {
        maxSurge: "25%",
        maxUnavailable: "25%"
      }
    };
  } else if (isDaemonSet.value && !statefulSet.value.updateStrategy) {
    daemonSet.value.updateStrategy = {};
  } else if (isStatefulSet.value && !statefulSet.value.updateStrategy) {
    statefulSet.value.updateStrategy = {};
  }
};

onMounted(() => {
  initData();
});
</script>
